<template>
	<view class="home">
		<!-- 渐变 -->
		<view class="hearder">
			<!-- 搜索 -->
			<view class="sousuo">
				<view class="place" @click="getArea">
					<text class="place-txt">郑州</text>
					<u-icon name="arrow-down-fill" color="#BDBDBD" size="20rpx"></u-icon>
					<text class="place-fen">|</text>
				</view>
				<view @click="Tosearch">
					<u-search placeholder="家庭保洁" v-model="soukey" :show-action="false" bg-color="#fff"
						search-icon-color="#BEBEBE">
					</u-search>
					<button class="btn">搜索</button>
				</view>
			</view>
		</view>
		<!-- 头部 -->
		<view class="wheel-box">
			<!-- 轮播 -->
			<view class="wheel">
				<u-swiper :list="Rotation" height="372"></u-swiper>
			</view>
			<!-- 保障 -->
			<view class="guarantee">
				<view class="title">平台保障</view>
				<view class="guar-two" v-for="(item,index) in Support" :key="index">{{item}}
					<view class="guar-dot">
					</view>
				</view>
			</view>

		</view>
		<!-- 内容 -->
		<view class="main">
			<!-- 分类 -->
			<view class="fenlei">
				<view class="fenlei-item" v-for="(item,index) in ProductType" :key="index" @click="ToServe(index)">
					<image class="img" :src="item.image" mode=""></image>
					<text class="txt">{{item.name}}</text>
				</view>
			</view>
			<!-- 新人专享 -->
			<view class="discounts">
				<view class="bgimg-box">
					<image class="bgimg" src='/static/image/zhuanxiang.png'></image>
				</view>
				<view class="disc-top">
					<view class="title">新人专享</view>
				</view>
				<view class="disc-box">
					<view class="disc-item" v-for="(item,index) in NewCoupon" :key="index">
						<view class="item-top">
							<text class="item-mey">{{ Number(item.used_amount) }}</text>
							<text>元</text>
						</view>
						<view class="item-bom">
							{{ item.title }}
							<view class="coleft"></view>
							<view class="coright"></view>
						</view>
					</view>
				</view>
				<view class="disc-ftr">
					<button class="btn" type="default" size="mini" @click="getDrawAll">一键领取</button>
				</view>
			</view>
			<!-- 热销精选 -->
			<view class="select">
				<view class="title">热销精选</view>
				<view class="ranking">
					<view class="ran-title">
						<text>日常保洁</text>
						<text style="color: #b18d65;">热销榜</text>
						<view class="title-dot"></view>
						<view class="title-dotw"></view>
					</view>
					<view class="ran-main">
						<view class="ranmain-item"
							:class="{'ranmain-item-two':index == 1,'ranmain-item-three':index == 2}"
							v-for="(item,index) in HotList" :key="index" @click="ToServeList(item)">
							<view class="img-box">
								<u-image :src="item.image" width="198rpx" height="198rpx" border-radius="16"
									class="img">
								</u-image>
								<view class="img-title">霸榜前{{item.week}}周</view>
								<view class="img-king"></view>
							</view>
							<view class="txt-box">
								<view class="u-line-1">{{item.name}}</view>
							</view>
						</view>
					</view>
					<view class="ran-ftr" @click="ToServetwo">右滑查看其他热门榜单 <u-icon name="arrow-right" size="22rpx">
						</u-icon>
					</view>
					<view class="left-top-bg"></view>
				</view>
			</view>
			<!-- 保洁师 -->
			<view class="worker">
				<view class="title-box">
					<view class="title">保洁师</view>
					<view class="title-rig" @click="ToCleaning">查看更多 <u-icon name="arrow-right" size="22rpx"></u-icon>
					</view>
				</view>
				<view class="worker-main">
					<view class="wor-item" v-for="(item,index) in Technician" :key="index" @click="ToCleaner(item.id)">
						<view class="img-box">
							<image class="img" :src="item.image" mode=""></image>
							<view class="img-icon">
								<view class="img-icon-one">
									<u-icon name="map-fill" size="22rpx" top="0rpx"></u-icon>
									<text class="maptxt">{{(item.distance / 1000).toFixed(1)}}km</text>
								</view>
								<view class="img-icon-two">
									<u-icon name="heart" size="30rpx" v-if="item.is_collection == 0"></u-icon>
									<u-icon name="heart-fill" size="30rpx" color="red" v-else></u-icon>
								</view>
							</view>
						</view>
						<view class="wor-item-ftr">
							<view class="info-box">
								<view class="user">
									<view class="name">{{item.name}}</view>
									<view class="age">{{item.age}}<text>岁</text></view>
								</view>
								<view class="make">
									<view class="txt">今日可约</view>
									<view class="txtwo">{{item.works_times}}</view>
								</view>
							</view>
							<view class="gangwei">{{item.type}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 推荐服务 -->
			<view class="recommend">
				<view class="title">推荐服务</view>
				<view class="reco-main">
					<view class="reco-item" v-for="(item,index) in Product" :key="index" @click="ToDetail(item)">
						<view class="rec-ite-lfet">
							<image class="img" :src="item.image" mode="aspectFill"></image>
						</view>
						<view class="rec-ite-right">
							<view class="purch-top">
								<view class="purch-top-title">{{ item.title }}</view>
								<view class="purch-top-txt">{{ item.description }}</view>
							</view>
							<view class="purch-bom">
								<view class="price-box">
									<view>￥<text class="acprice">{{ Math.trunc(item.price) }}</text></view>
									<view class="orprice">￥<text class="txt">{{ Math.trunc(item.line_price) }}</text>
									</view>
								</view>
								<u-button type="error" shape="circle" size="mini" @click="ToDetail(item)">去购买
								</u-button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 客服 -->
		<view class="customer ">
			<image src="/static/image/customer.svg" mode="" class="kefuimg"></image>
			<button open-type="contact" class="opbtn"></button>
		</view>
		<!-- 地区 -->
		<!-- <u-select v-model="AreaShow" mode="mutil-column-auto" :list="Area" @confirm="confirm"></u-select> -->
		<u-picker mode="multiSelector" v-model="AreaShow" :default-selector='[0, 0]' :range="Area"
			range-key="shortname">
		</u-picker>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import {
		ResRotation,
		ResSupport,
		ResProductType,
		ResNewCoupon,
		ResHot,
		ResTechnician,
		ResProduct,
		Resarea,
		ResDrawAll
	} from '@/untils/api.js'
	export default {
		computed: {
			...mapState(['userInfo'])
		},
		data() {
			return {
				soukey: '',
				Rotation: [],
				Support: [],
				ProductType: [],
				NewCoupon: [],
				HotList: [],
				Technician: [],
				Product: [],
				Area: [],
				AreaShow: false
			}
		},
		onShow() {
			this.getTechnician()
		},
		onLoad() {
			this.getRotation()
			this.getSupport()
			this.getProductType()
			this.getNewCoupon()
			this.getHot()
			this.getProduct()
		},
		methods: {
			Tosearch() {
				this.soukey = ''
				uni.navigateTo({
					url: '/pages/Home/Search'
				})
			},
			async getDrawAll() {
				// 判断是否登录
				if (this.userInfo != '{}') {
					let idObj = { id: [] }
					this.NewCoupon.forEach(item => {
						idObj.id.push(item.id)
					})
					const { data: res } = await ResDrawAll(idObj)
					if (res.code != 1) return uni.$showMsg(res.msg)
					uni.navigateTo({
						url: '/pages/Discount/Mydiscount'
					})
				} else {
					uni.$showMsg('清先登录')
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/Login/Login'
						})
					}, 1000)
				}

			},
			ToServetwo() {
				uni.switchTab({
					url: '/pages/Serve/Serve'
				})
			},
			ToServeList(item) {
				uni.navigateTo({
					url: `/pages/Home/Detail?id=${item.id}`
				})
				uni.setNavigationBarTitle({
					title: item.name
				})
			},
			ToServe(index) {
				uni.$emit('getIndex', index)
				uni.switchTab({
					url: '/pages/Serve/Serve'
				});
			},
			ToCleaner(id) {
				uni.navigateTo({
					url: `/pages/Home/Cleaner?id=${id}`
				})
			},
			ToDetail(item) {
				uni.navigateTo({
					url: `/pages/Home/Detail?id=${item.id}`
				})
				uni.setNavigationBarTitle({
					title: item.title
				})
			},
			ToCleaning() {
				uni.navigateTo({
					url: '/pages/Home/Cleaning'
				})
			},
			// 获取轮播图
			async getRotation() {
				const {
					data: res
				} = await ResRotation()
				console.log(res);
				this.Rotation = res.data
			},
			async getSupport() {
				const {
					data: res
				} = await ResSupport()
				this.Support = res.data
			},

			// 获取服务分类
			async getProductType() {
				const { data: res } = await ResProductType()
				this.ProductType = res.data
			},
			async getNewCoupon() {
				const { data: res } = await ResNewCoupon()
				console.log(res, '优惠券');
				this.NewCoupon = res.data
			},
			// 热销精选
			async getHot() {
				const {
					data: res
				} = await ResHot()
				this.HotList = res.data
			},
			async getTechnician() {
				const {
					data: res
				} = await ResTechnician()
				console.log(res, '技师');
				this.Technician = res.data
			},
			async getProduct() {
				const {
					data: res
				} = await ResProduct()
				console.log(res, '服务');
				this.Product = res.data

			},
			// 地区选择
			async getArea() {
				const {
					data: res
				} = await Resarea()
				console.log(res, '222');
				this.Area = res.data
				this.AreaShow = true
			},
			confirm(e) {
				// this.areaParams.region = e.province.label + '-' + e.city.label + '-' + e.area.label
				console.log(e);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.home {

		// 公共
		.title {
			font-size: 32rpx;
			font-weight: 700;
		}

		// 渐变
		.hearder {
			padding: 120rpx 20rpx;
			background: linear-gradient(90deg, #DEF6FE 0%, #FEDAD8 100%);

			.sousuo {
				position: relative;

				/deep/.u-content {
					padding-left: 160rpx;
				}

				.btn {
					width: 113rpx;
					height: 56rpx;
					line-height: 56rpx;
					font-size: 24rpx;
					color: #fff;
					background: #00C7A7;
					border-radius: 28rpx;
					position: absolute;
					top: 4rpx;
					right: 7rpx;
				}

				button.btn::after {
					border: none;
				}

				.place {
					padding: 0 20rpx;
					position: absolute;
					top: 12rpx;
					left: 10rpx;

					.place-txt {
						font-size: 28rpx;
						margin-right: 10rpx;
					}

					.place-fen {
						color: #BDBDBD;
						margin-left: 20rpx;
					}
				}
			}
		}


		// 头部
		.wheel-box {
			padding: 20rpx 20rpx 0;
			position: relative;

			.wheel {
				width: 704rpx;
				height: 372rpx;
				position: absolute;
				top: -100rpx;
				left: 23rpx;

			}

			.guarantee {
				height: 76rpx;
				background-color: #EEF8FF;
				margin-top: 280rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.guar-two {
					font-size: 24rpx;
					position: relative;

					.guar-dot {
						position: absolute;
						width: 10rpx;
						height: 10rpx;
						border-radius: 10rpx;
						top: 10rpx;
						left: -17rpx;
						background-color: #42FF77;
					}
				}
			}
		}


		// 内容
		.main {
			padding: 0 20rpx 20rpx;

			// 分类
			.fenlei {
				display: flex;
				flex-wrap: wrap;
				padding: 15rpx 0;

				.fenlei-item {
					width: 120rpx;
					margin: 30rpx 27rpx 0 0;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					&:nth-child(5) {
						margin-right: 0 !important;
					}

					&:nth-child(10) {
						margin-right: 0 !important;
					}

					.img {
						width: 85rpx;
						height: 85rpx;
						border-radius: 50%;
					}

					.txt {
						margin-top: 10rpx;
						font-size: 26rpx;
					}
				}
			}

			// 新人专享
			.discounts {
				height: 387rpx;
				margin-top: 30rpx;
				box-shadow: 0rpx 3rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
				border-radius: 15rpx;
				position: relative;
				overflow: hidden;

				.bgimg-box {
					position: absolute;
					top: -10rpx;
					right: -30rpx;

					.bgimg {
						width: 250rpx;
						height: 250rpx;
					}
				}

				.disc-top {
					padding: 20rpx 40rpx 30rpx;
					// background: linear-gradient(to bottom, #FFF3F0, #FFFFFF);
					background: linear-gradient(180deg, #ffefeb 0%, #FFFFFF 100%);
				}

				.disc-box {
					display: flex;
					padding: 0 40rpx;
					z-index: 1;

					.disc-item {
						width: 142rpx;
						margin-right: 19rpx;
						padding: 0 10rpx;
						box-sizing: border-box;
						display: flex;
						flex-direction: column;
						font-size: 20rpx;
						text-align: center;
						border: 1px solid #FDDEDC;
						background-color: #FFF2F1;
						border-radius: 20rpx;
						color: #D78684;


						.item-top {
							height: 95rpx;
							line-height: 95rpx;

							.item-mey {
								font-size: 32rpx;
								margin-right: 5rpx;
								color: #FD4233;
							}
						}

						.item-bom {
							border-top: 1px dashed #FDDEDC;
							height: 55rpx;
							line-height: 55rpx;
							position: relative;

							.coleft {
								width: 10rpx;
								height: 10rpx;
								border: 1px solid #FDDEDC;
								background-color: #fff;
								border-left-color: #fff;
								position: absolute;
								top: -6rpx;
								left: -15rpx;
								border-radius: 50%;
							}

							.coright {

								width: 10rpx;
								height: 10rpx;
								border: 1px solid #FDDEDC;
								background-color: #fff;
								border-right-color: #fff;
								position: absolute;
								top: -6rpx;
								right: -15rpx;
								border-radius: 50%;

							}
						}
					}
				}

				.disc-ftr {
					margin-top: 30rpx;
					text-align: center;

					.btn {
						width: 263rpx;
						height: 65rpx;
						color: #fff;
						font-size: 28rpx;
						line-height: 65rpx;
						background-color: #03C3A8;
						border-radius: 33rpx;
					}

					button.btn::after {
						border: none;
					}
				}
			}

			// 精选
			.select {
				.title {
					font-size: 32rpx;
					font-weight: 700;
					margin: 40rpx 0;
				}

				.ranking {
					background-color: #FFF2D0;
					border-radius: 34rpx;
					padding: 30rpx;
					position: relative;
					overflow: hidden;

					.ran-title {
						text-align: center;
						color: #03C3A8;
						position: relative;
						font-size: 34rpx;
						font-weight: 600;


						.title-dot {
							position: absolute;
							width: 7rpx;
							height: 7rpx;
							top: 20rpx;
							left: 190rpx;
							background-color: #CE8528;
						}

						.title-dotw {
							position: absolute;
							width: 7rpx;
							height: 7rpx;
							top: 20rpx;
							right: 190rpx;
							background-color: #CE8528;
						}
					}

					.ran-main {
						padding-top: 30rpx;
						display: flex;

						.ranmain-item {
							width: 198rpx;
							height: 308rpx;
							margin-right: 16rpx;

							z-index: 10;

							.img-box {
								margin-top: 36rpx;
								position: relative;

								.img-title {
									width: 100%;
									height: 32rpx;
									line-height: 32rpx;
									background-color: #191818;
									text-align: center;
									font-size: 20rpx;
									color: #fff;
									opacity: 0.5;
									position: absolute;
									bottom: -1rpx;
									left: 0;
									border-bottom-left-radius: 20rpx;
									border-bottom-right-radius: 20rpx;
								}


								.img-king {
									width: 40rpx;
									height: 40rpx;
									background: url(/static/image/king2.png) no-repeat;
									background-size: 36rpx;
									position: absolute;
									top: 0;
									left: 0;
								}
							}

							.txt-box {
								height: 75rpx;
								line-height: 75rpx;
								padding: 0 20rpx;
								background: linear-gradient(to right, #f4eedc, #f8decd);
								font-size: 24rpx;
								border-bottom-left-radius: 16rpx;
								border-bottom-right-radius: 16rpx;
								text-align: center;
							}
						}

						.ranmain-item-two {
							width: 224rpx;

							.img-box {
								margin: 0;

								/deep/ .u-image {
									width: 224rpx !important;
									height: 224rpx !important;
								}

								.img-king {
									background: url(/static/image/king1.png) no-repeat;
									background-size: 36rpx;
								}
							}

							.txt-box {
								height: 85rpx;
								line-height: 99rpx;
							}

						}

						.ranmain-item-three {
							.img-box {
								.img-king {
									background: url(/static/image/king3.png) no-repeat;
									background-size: 36rpx;
								}
							}
						}

					}

					.ran-ftr {
						color: #70685B;
						font-size: 26rpx;
						margin-top: 26rpx;
						text-align: center;
					}

					.left-top-bg {
						width: 130rpx;
						height: 300rpx;
						position: absolute;
						top: -50rpx;
						left: -50rpx;
						transform: rotate(30deg);
						background: linear-gradient(213deg, #FEEECD 0%, #FCF9E8 100%);
					}
				}
			}

			// 保洁师
			.worker {
				.title-box {
					display: flex;
					justify-content: space-between;
					padding: 40rpx 0;

					.title-rig {
						color: #919191;
						font-size: 24rpx;
					}
				}

				.worker-main {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;

					.wor-item {
						width: 49%;
						height: 472rpx;
						padding-bottom: 20rpx;
						border-radius: 20rpx;
						margin-bottom: 15rpx;
						box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.06);

						.img-box {
							position: relative;

							.img {
								width: 100%;
								height: 343rpx;
								border-top-left-radius: 20rpx;
								border-top-right-radius: 20rpx;
							}

							.img-icon {
								width: 100%;
								display: flex;
								justify-content: space-between;
								align-items: center;
								position: absolute;
								bottom: 24rpx;
								left: 0;
								padding: 0 20rpx;
								color: #fff;
								font-size: 20rpx;



								.img-icon-one {
									height: 32rpx;
									line-height: 32rpx;
									padding: 0 10rpx;
									background-color: #000000;
									opacity: 0.5;
									border-radius: 20rpx;
									display: flex;
									color: #fff;

									.maptxt {
										margin-left: 5rpx;
									}
								}

								.img-icon-two {
									width: 44rpx;
									height: 44rpx;
									background-color: #000000;
									opacity: 0.5;
									border-radius: 50rpx;
									text-align: center;
									line-height: 54rpx;
								}
							}
						}



						.wor-item-ftr {
							padding: 20rpx 10rpx;

							.info-box {
								display: flex;
								justify-content: space-between;
								align-items: center;

								.user {
									display: flex;
									align-items: center;

									.name {
										font-size: 30rpx;
										font-weight: 700;
									}

									.age {
										margin-left: 5rpx;
										font-size: 24rpx
									}
								}


								.make {
									width: 145rpx;
									height: 32rpx;
									font-size: 20rpx;
									border: 1px solid #01C3A8;
									color: #01C3A8;
									border-radius: 6rpx;
									overflow: hidden;
									display: flex;


									.txt {
										width: 84rpx;
										height: 30rpx;
										text-align: center;
										background-color: #01C3A8;
										color: #fff;
									}

									.txtwo {
										width: 58rpx;
										height: 30rpx;
										text-align: center;
									}
								}
							}


							.gangwei {
								font-size: 24rpx;
								color: #919191;
								margin-top: 13rpx;
							}
						}
					}
				}

			}



			// 推荐服务
			.recommend {
				.title {
					padding: 40rpx 0;
				}

				.reco-main {
					.reco-item {
						height: 288rpx;
						overflow: hidden;
						margin-bottom: 20rpx;
						border-radius: 16rpx;
						display: flex;
						box-shadow: 2rpx 3rpx 12rpx 2rpx rgba(179, 179, 179, 0.31);

						.rec-ite-lfet {
							.img {
								width: 271rpx;
								height: 288rpx;
							}
						}

						.rec-ite-right {
							padding: 15rpx;
							display: flex;
							flex: 1;
							flex-direction: column;
							justify-content: space-between;

							.purch-top {
								.purch-top-title {
									font-weight: 700;
									font-size: 32rpx;
								}

								.purch-top-txt {
									color: #646464;
									font-size: 24rpx;
									margin-top: 8rpx;
								}
							}


							.purch-bom {
								display: flex;
								justify-content: space-between;
								align-items: center;

								.price-box {
									display: flex;
									align-items: baseline;

									.acprice {
										font-size: 50rpx;
										font-weight: 700;
										margin-right: 5rpx;
									}


									.orprice {
										font-size: 22rpx;
										color: #757575;

										.txt {
											text-decoration: line-through;
										}
									}

								}


							}
						}
					}
				}
			}
		}

		.customer {
			width: 69rpx;
			height: 69rpx;
			position: fixed;
			bottom: 120rpx;
			right: 10rpx;

			.kefuimg {
				width: 69rpx;
				height: 69rpx;
			}

			.opbtn {
				width: 69rpx;
				height: 69rpx;
				background-color: #fff;
				opacity: 0.1;
				z-index: 1;
				position: absolute;
				top: 0;
				right: 0;
			}

			button.opbtn::after {
				border: none;
			}
		}
	}
</style>
